<!--组件-我的服务器-->
<template>
  <div class="bg bg2 bk1">

    <!--名称-->
    <div class="row acenter">

      <div class="row aend all">
        <text class="font32 text1">{{item.serverName}}</text>
        <div class="row center all" 
        style="lines:1; text-overflow: ellipsis;">
          <text class="font22 text1 text-line1 all">{{'（#' + item.serverCode}}</text>
          <text class="font22 text1">{{'）'}}</text>
          <div :class="['tag', Config.upDownBg(item.speed, 'tag-red', 'tag-green')]">
            <text :class="['font20', Config.upDownFont(item.speed, 'text-red', 'text-green')] ">{{item.speedText}}</text>
          </div>
        </div>
      </div>
      
      <div class="widht10"></div>
      <div class="row acenter" @click="remarkClick()">
        <text class="font24 text1">{{item.serverMark.length ? item.serverMark : T('备注')}}</text>
        <LImage class="edit-image" :src="Config.img('editor_white.png')"></LImage>
      </div>
    </div>
    
    <!--信息-->
    <div class="info bg3">

      <template v-if="item.outerIp">
        <div class="row acenter" style="widht:100%;">
          <text class="font26 text2">{{T('IP')}}</text>
          
          <div class="widht20"></div>
          <text class="font30 text1 all"
          style="lines:1; text-overflow: ellipsis;text-align: right;">{{item.outerIp}}</text>

          <div class="widht20"></div>
          <LImage class="img-copy" :src="Config.img('v2_copy.png')" @click="copyClick"></LImage>
        </div>
        <div class="height30"></div>
      </template>

      <div class="row acenter">
        <text class="font26 text2">{{T('执行数')}}</text>
        <div class="all"></div>
        <text class="font30 text1">{{item.serverCount == undefined ? '--' : item.serverCount + T('个')}}</text>
      </div>

      <div class="height30"></div>
      <div v-for="(map, index) in item.pool" v-bind:key="index">
        <div class="height25" v-if="index > 0 && index < item.pool.length"></div>
        <div class="row acenter" >
          <div class="row acenter">
            <text class="font26 text2">{{T('执行频率')}}</text>
            <text class="font26 text2" v-if="map.exchange">{{'(' + map.exchange + ')'}}</text>
          </div>
          <div class="all"></div>
          <text class="font30 text1">{{map.frequency == undefined ?  '--': map.frequency + T('次/分')}}</text>
        </div>
      </div>
      
      <div class="height30"></div>
      <div class="row acenter">
        <text class="font26 text2">{{T('剩余时长')}}</text>
        <div class="all"></div>
        <text class="font30 text1">{{getTimeRemaining(item.deadlineTime)}}</text>
      </div>

      <div class="height30"></div>
      <div class="row acenter">
        <text class="font26 text2">{{T('自动续费')}}</text>
        <div class="all"></div>
        <Switc class="switc" ref='switc' :isOn="item.isAutoRenewal" :isEdit="true" @switcClick="switcClick"></Switc>
      </div>
    </div>

    <!--按钮-->
    <div class="row acenter">

      <div v-if="item.serverStatus == 'ARRANGED'">
        <div class="but main1" @click="renewClick()">
          <text class="font30 text1">{{T('续费')}}</text>
        </div>
      </div>

      <div class="all"></div>
      <div class="but main1" @click="upClick" v-if="item.serverStatus == 'ARRANGED'">
        <text class="font30 text1">{{T('去启动策略')}}</text>
      </div>
      <div class="row acenter" v-else>
        <LImage class="time-image" :src="Config.img('bushu_time.png')"></LImage>
        <text class="font30 main-t1">{{T('部署中，请等待…')}}</text>
      </div>
    </div>
  </div> 
</template>
    
<script>

//组件
import VSwitc from "@/public/view/VSwitc.vue";

//功能
import Config from "@/_js/config";
import navigator from "@/_js/navigator";
import broadcast from "@/_js/broadcast";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  components: {
    VSwitc,
  },

  props: {
    item: Object, 
  },

  data() {
    return {
      T:T,
      Config: Config,
      automatic: false,
    };
  },

  mounted() {
  },

  methods: {
    
    /********************************** 获取数据*/
    /** 获取运行时长
     * 
     * @param {String} startTime 开始时间
     * @param {String} endTime  结束时间
     * @param {String} D 天单位
     * @param {String} H 时单位
     * @param {String} M 分单位
     */
    getTimeRemaining(endTime){
      
      var startTime = new Date().getTime();
      var disTime = endTime - startTime;

      var day =Math.floor(disTime/86400000);
      var hour=Math.floor(disTime%86400000/3600000);
      var min=Math.floor(disTime%86400000%3600000/60000);
      return day + T('天') + hour + T('时') + min + T('分');
    },

    /********************************** 点击触发*/
    //备注
    remarkClick() {
      this.$emit("remarkClick"); 
    },

    //复制IP
    copyClick() {
      this.$emit("copyClick");
    },
    
    //自动续费
    switcClick(e) {
      this.$emit("switcClick", e.isOn);
    },
    
    //续费
    renewClick() {
      this.$emit("renewClick");
    },

    //去启动
    upClick() {

      var str = JSON.stringify(this.item);
      weexFunction.setConfig('up-server-spot', str, ()=>{});

      weexFunction.setShowTabBar(1);
      weexFunction.postNotificationName('StrategyShow', {'index':0});
      broadcast.send('UpShow', {'index':0});
      navigator.back(2);
    },
  },
};
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  border-radius: 16px;
  border-width: 2px;

  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}


/****************** 其他*/
.text-red {
  color:#F85454;
}
.text-green {
  color:#00AD88;
}
.edit-image {
  width: 32px;
  height: 32px;
  margin-left: 10px;
}
.time-image {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.discount {
  top: 0;
  left: 170px;

  position: absolute;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  height: 38px;

  border-top-left-radius: 19px;
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;

  padding-left: 16px;
  padding-right: 16px;
}

/****************** 标签*/
.tag {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 32px;
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
}
.tag-red {
  background-color: rgba(219, 69, 100, 0.2);
}
.tag-green {
  background-color: rgba(0, 173, 136, 0.2);
}


/****************** 信息*/
.info {
  border-radius: 8px;

  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 30px;

  margin-top: 30px;
  margin-bottom: 40px;
}
.switc{
  width: 90px;
  height: 60px;
}
.img-copy {
  width: 32px;
  height: 32px;
}

/****************** 按钮*/
.but {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 64px;
  border-radius: 8px;
}

/****************** 间距*/
.height30{
  height: 30px;
}
.height25{
  height: 25px;
}
.widht10 {
  width: 10px;
}
.widht20 {
  width: 10px;
}
</style>